<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="关键字">
          <el-input v-model="name" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="addConsumableLedger()">新增</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table :data="dataList" :columns="columns" :total="total" @pageChange="pageChange">
        <template v-slot:name="{row}">
          <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
        </template>
        <template v-slot:options="{row}">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editConsumableLedger(row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="delConsumableLedger(row)">删除</el-button>
        </template>
        <template v-slot:devStatus="{row: {devStatus}}">
          {{ getDictName(consumableLedgerDevStatus, devStatus) }}
        </template>
        <template v-slot:devSource="{row: {devSource}}">
          {{ getDictName(consumableLedgerDevSource, devSource) }}
        </template>
        <template v-slot:techStatus="{row: {techStatus}}">
          {{ getDictName(consumableLedgerTechStatus, techStatus) }}
        </template>
        <template v-slot:factoryTime="{row: {factoryTime}}">
          {{ dateFormat(factoryTime) }}
        </template>
        <template v-slot:payTime="{row: {payTime}}">
          {{ dateFormat(payTime) }}
        </template>
        <template v-slot:monitorDevice="{row: {monitorDevice}}">
          {{ getDictName(consumableLedgerMonitorDevice, monitorDevice) }}
        </template>
        <template v-slot:specialDevice="{row: {specialDevice}}">
          {{ getDictName(consumableLedgerSpecialDevice, specialDevice) }}
        </template>
        <template v-slot:professionalDevice="{row: {professionalDevice}}">
          {{ getDictName(consumableLedgerProfessionalDevice, professionalDevice) }}
        </template>
        <template v-slot:amTime="{row: {amTime}}">
          {{ dateFormat(amTime) }}
        </template>
        <template v-slot:createTime="{row: {createTime}}">
          {{ dateFormat(createTime) }}
        </template>

      </com-table>
    </div>
    <add-consumable-ledger
      :show-modal.sync="showModal"
      :opt-type="optType"
      :data="unitDetail"
      @freshList="search"
    />
  </div>
</template>

<script>
import { getConsumableLedgerList, deleteConsumableLedger } from '@/api/consumableManage'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import addConsumableLedger from './addConsumableLedger.vue'
import { consumableLedgerDevStatus, consumableLedgerDevSource, consumableLedgerTechStatus, consumableLedgerMonitorDevice, consumableLedgerSpecialDevice, consumableLedgerProfessionalDevice } from '@/utils/dicData'
export default {
  name: 'ConsumableLedger',
  components: {
    addConsumableLedger
  },
  data() {
    return {
      name: '',
      getDictName,
      consumableLedgerDevStatus,
      consumableLedgerDevSource,
      consumableLedgerTechStatus,
      consumableLedgerMonitorDevice,
      consumableLedgerSpecialDevice,
      consumableLedgerProfessionalDevice,

      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          label: '序号',
          prop: 'sequence'
        },
        {
          label: '资产编号',
          prop: 'assetNumber'
        },
        {
          label: '资产单位',
          prop: 'assetUnit'
        },
        {
          label: '车牌号',
          prop: 'plateNumber'
        },
        {
          label: '设备编号',
          prop: 'devNumber'
        },
        {
          label: '设备名称',
          prop: 'devName'
        },
        {
          label: '设备分类',
          prop: 'devCategory'
        },
        {
          label: '设备状态',
          prop: 'devStatus',
          slot: 'devStatus'
        },
        {
          label: '设备来源',
          prop: 'devSource',
          slot: 'devSource'
        },
        {
          label: '设备功率',
          prop: 'devPower'
        },
        {
          label: '规格',
          prop: 'specification'
        },
        {
          label: '所在地',
          prop: 'address'
        },
        {
          label: '技术状况',
          prop: 'techStatus',
          slot: 'techStatus'
        },
        {
          label: '厂家编号',
          prop: 'factoryNumber'
        },
        {
          label: '厂家名称',
          prop: 'factoryName'
        },
        {
          label: '出厂时间',
          prop: 'factoryTime',
          slot: 'factoryTime',
          width: '90'
        },
        {
          label: '设计能力',
          prop: 'designAbility'
        },
        {
          label: '购买时间',
          prop: 'payTime',
          slot: 'payTime',
          width: '90'
        },
        {
          label: '机长',
          prop: 'captain'
        },
        {
          label: '外形尺寸',
          prop: 'size'
        },
        {
          label: '发动机编号',
          prop: 'engineNumber'
        },
        {
          label: '重量',
          prop: 'weight'
        },
        {
          label: '底盘号',
          prop: 'chassisNumber'
        },
        {
          label: '是否监视测量仪器',
          prop: 'monitorDevice',
          slot: 'monitorDevice'
        },
        {
          label: '是否特种设备',
          prop: 'specialDevice',
          slot: 'specialDevice'
        },
        {
          label: '是否大型专用设备',
          prop: 'professionalDevice',
          slot: 'professionalDevice'
        },
        {
          label: '备注',
          prop: 'remark'
        },
        {
          label: '购置原值',
          prop: 'payAmount'
        },
        {
          label: '重置原值',
          prop: 'resetAmount'
        },
        {
          label: '规定折旧月数',
          prop: 'oldMonth'
        },
        {
          label: '使用月数',
          prop: 'useMonth'
        },
        {
          label: '净值',
          prop: 'netValue'
        },
        {
          label: '残值',
          prop: 'residualValue'
        },
        {
          label: '残值率',
          prop: 'residualRate'
        },
        {
          label: '剩余折旧月数',
          prop: 'remainMonth'
        },
        {
          label: '累计折旧值',
          prop: 'totalOldValue'
        },
        {
          label: '辅机名称',
          prop: 'amName'
        },
        {
          label: '辅机型号',
          prop: 'amModel'
        },
        {
          label: '辅机厂家',
          prop: 'amFactory'
        },
        {
          label: '辅机功率',
          prop: 'amPower'
        },
        {
          label: '辅机编号',
          prop: 'amNumber'
        },
        {
          label: '辅机出厂时间',
          prop: 'amTime',
          slot: 'amTime',
          width: '90'
        },
        {
          label: '图片',
          prop: 'image'
        },
        {
          label: '编制时间',
          prop: 'createTime',
          slot: 'createTime',
          width: '90'
        },

        {
          fixed: 'right',
          label: '操作',
          width: '180',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams
      }
      getConsumableLedgerList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    addConsumableLedger() {
      this.optType = 'add'
      this.showModal = true
    },
    editConsumableLedger(data) {
      this.optType = 'edit'
      this.unitDetail = data
      this.showModal = true
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.unitDetail = data
      this.showAddFileModal = true
    },
    delConsumableLedger(data) {
      this.$confirm('确定要删除该易耗品台账吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = data
        deleteConsumableLedger({
          machineDeviceDetailId: id
        }).then(res => {
          const { code, msg } = res
          if (code === '0001') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getDataList()
          } else {
            this.$message({
              type: 'error',
              message: msg || '删除失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {

    }

  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail{
  height: calc(100% - 50px);
}
</style>
